<template>
  <div class="theme">
    <!-- 添加主题/信息源弹框 -->
    <div class="addTheme" >
      <div class="addThemeT">
        <div class="addTLeft">
          <span>请选择{{titleName}}</span>
          <span class="limit" :class="limitNum? 'limitRed' : '' ">（最多可选20个）</span>
        </div>
        <div class="addTRight">
          <span>没有你期望的{{titleName}}？</span>
          <span @click="feedback">反馈{{titleName}}</span>
        </div>
      </div>
      <!-- 存放选中的主题/信息源 -->
      <div class="themeList">
        <ul v-if="AddId === 0">
          <li v-for="(value,i) in themeDatass" :key="i" :data-mtId="value.mtId">{{value.text}}<i @click="themeDataClose" :data-mtId="value.mtId">{{value.text}}</i></li>
        </ul>
        <ul v-else-if="AddId === 1">
          <li v-for="(value,i) in MmessageDatass" :key="i" :data-mtId="value.id">{{value.text}}<i @click="themeDataClose" :data-mtId="value.id">{{value.text}}</i></li>
        </ul>
      </div>
      <div class="themeContent">
        <!-- 左边分类目录结构 -->        
        <div class="themeCLeft">
          <ul @click="leftList" v-if="AddId === 0">
            <li v-for="(v, i) in getData.parentThemeList" :key="i" :data-mtId="v.mtId">{{v.mtName}}</li>
          </ul>
          <ul @click="leftList" v-else-if="AddId === 1">
            <li v-for="(v, i) in getData.list" :key="i" :data-mtId="v.id">{{v.miInforname}}</li>
          </ul>
        </div>
        <!-- 右边信息列表页 -->
        <div class="themeCRight">
          <div class="themeCRList">
            <ul @click="rightList" id="rightLists" v-if="AddId === 0">
              {{childThemeList}}
              <li v-for="(value, index) in childThemeList" ref="rightList" :key="index" :data-mtId="value.mtId" :class="value.cle === '1' || value.checked === 'true'? 'rightlistSelected' : 'rightList'">{{value.mtName}}<i></i></li>              
            </ul>
            <ul @click="rightList" id="rightLists" v-else-if="AddId === 1">
              {{childThemeList}}
              <li v-for="(value, index) in childThemeList" ref="rightList" :key="index" :data-mtId="value.id" :class="value.cle === '1' || value.checked === 'true'? 'rightlistSelected' : 'rightList'">{{value.miInforname}}<i></i></li>              
            </ul>
          </div>
          <div class="themeBtn">
            <button class="themeConfirm" @click="themeConfirm">确定</button>
            <button class="themeClose" @click="themeClose">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      themeData: [], // 主题弹出框数据
      themeDatass: '', // 主题弹出框数据
      MmessageData: [], // 信息源弹出框数据
      MmessageDatas: [], // 信息源弹出框数据
      themeDatas: [], // 主题弹出框数据
      addThemeShow: false, // 主题/信息源弹出框是否显示
      themeUlShow: false, // 关注主题下拉框是否显示
      MmessageDatass: '',
      AddId: '',
      limitNum: false,
      titleName: '主题',
      getData: '',
      childThemeList: ''
    }
  },
  props: [
    'themeUldatas',
    'themeUlclick',
    'MUldatas'
  ],
  mounted: function () {
    this.AddId = this.themeUlclick
    if (this.AddId === 0) {
      this.titleName = '主题'
      this.getMDataInit('theme/showList/0','themeUldatas','childThemeList')
    } else if (this.AddId === 1) {
      this.titleName = '信息源'
      this.getMDataInit('inforSource/showAll/0','MUldatas','childList')            
    }
    if (this.AddId === 0 && this.themeUldatas!== '') {
      this.themeDatass = this.themeUldatas
      this.themeDatas = this.themeUldatas
    } else if (this.AddId === 1 && this.MUldatas !== ''){
      this.MmessageDatass = this.MUldatas
      this.MmessageDatas = this.MUldatas
    }
  },
  methods: {
    getMDataInit: function (url,datas,childrens) {
      var T = this
      var datas = datas
      this.$http.get('http://192.168.31.217:8080/' + url + '')
      .then(function (response) {
        T.getData = response.data.data
        T.childThemeList = response.data.data[childrens]
        // for (var j = 0; j < T.datas.length; j++) {
        //   for (var i = 0; i < T.childThemeList.length; i++) {
        //     if (T.datas[j].mtId == T.childThemeList[i].mtId) {
        //       T.childThemeList[i].checked = 'true'
        //     }
        //   }
        // }
      })
    },
    // —————— 弹出框事件 ——————
    rightList: function (event) {
      // this.MmessageDatass = this.MmessageDatas.concat(this.MmessageData)
      // this.themeDatass = this.themeDatas.concat(this.themeData)
      if (event.target.className === 'rightList' || event.target.className === 'rightlistSelected') {
        if (this.AddId === 0) {
          if (event.target.className.indexOf('rightList') == -1) {
            event.target.className = 'rightList'
            for (var i = 0; i <  this.themeDatass.length; i++) {
              if (event.target.getAttribute('data-mtId') ==  this.themeDatass[i].mtId) {               
                   this.themeDatass.splice(i,1);
                   this.limitNum = false
              }
            }
            for (var i = 0; i <  this.themeData.length; i++) {
              if (event.target.getAttribute('data-mtId') ==  this.themeData[i].mtId) {
                   this.themeData.splice(i,1);
                   this.limitNum = false
              }
            }
          } else {
            if (this.themeDatass.length < 20) {
              event.target.className = 'rightlistSelected'
              var obj = new Object
              obj['mtId'] = event.target.getAttribute('data-mtId')
              obj['text'] = event.target.innerText
              this.themeData.push(obj)
              this.themeDatass = this.themeDatas.concat(this.themeData)
              this.limitNum = false
              // this.MmessageData = []
            } else {
              this.limitNum = true
            }
          }
        }
        if (this.AddId === 1) {
          if (event.target.className.indexOf('rightList') == -1) {
            event.target.className = 'rightList'
            for (var i = 0; i < this.MmessageDatass.length; i++) {
              if (event.target.getAttribute('data-mtId') ==  this.MmessageData[i].mtId) {
                  this.MmessageDatass.splice(i,1);
                  this.limitNum = false
              }
            }
            for (var i = 0; i < this.MmessageData.length; i++) {
              if (event.target.getAttribute('data-mtId') ==  this.MmessageData[i].mtId) {
                  this.MmessageData.splice(i,1);
                  this.limitNum = false
              }
            }
          } else {
            if (this.MmessageDatass.length < 20) {
              event.target.className = 'rightlistSelected'
              var obj = new Object
              obj['mtId'] = event.target.getAttribute('data-mtId')
              obj['text'] = event.target.innerText
              this.MmessageData.push(obj)
              console.log(this.MmessageData)
              this.MmessageDatass = this.MmessageDatas.concat(this.MmessageData)
            } else {
              this.limitNum = true
            }
          }
        }
      }
    },
    // 关闭选中主题/信息源
    themeDataClose: function (event) {
      var themeCRList = document.getElementsByClassName('themeCRList')[0]
      var list = themeCRList.getElementsByTagName('li')
      if (this.AddId === 0) {
        for (var i = 0; i < this.themeDatass.length; i++) {
          if (event.target.getAttribute('data-mtId') === this.themeDatass[i].mtId) {
              this.themeDatass.splice(i,1);
              this.limitNum = false              
          }
        }
        for (var i = 0; i < this.themeData.length; i++) {
          console.log(this.themeData[i].text)
          if (event.target.getAttribute('data-mtId') === this.themeData[i].mtId) {
              this.themeData.splice(i,1);
              this.limitNum = false
          }
        }
        for (var i = 0; i < list.length; i ++ ) {
          if (event.target.innerText === list[i].innerText) {
            list[i].className = 'rightList'
          }
        }
      } else if (this.AddId === 1) {
        for (var i = 0; i < this.MmessageDatass.length; i++) {
          if (event.target.getAttribute('data-mtId') === this.MmessageDatass[i].mtId) {
              this.MmessageDatass.splice(i,1);
              this.limitNum = false
          }
        }
        for (var i = 0; i < this.MmessageData.length; i++) {
          if (event.target.getAttribute('data-mtId') === this.MmessageData[i].mtId) {
              this.MmessageData.splice(i,1);
              this.limitNum = false
          }
        }
        for (var i = 0; i < list.length; i ++ ) {
          if (event.target.innerText === list[i].innerText) {
            list[i].className = 'rightList'
          }
        }
      }  
    },
    // 切换左边目录
    leftList: function (event) {
      var themeCLeft = document.getElementsByClassName('themeCLeft')[0]
      var list = themeCLeft.getElementsByTagName('li')
      for (var i = 0; i < list.length; i++) {
        list[i].className = ''     
      }
      if (event.target.nodeName === 'LI') {
          var key = event.target.getAttribute('data-mtId')
          var T = this
          if (this.AddId === 0) {
            this.$http.get('http://192.168.31.217:8080/theme/showList/' + key + '')
            .then(function (response) {
              T.childThemeList = response.data.data
              for (var j = 0; j < T.themeUldatas.length; j++) {
                for (var i = 0; i < T.childThemeList.length; i++) {
                  if (T.themeUldatas[j].mtId == T.childThemeList[i].mtId) {
                    T.childThemeList[i].checked = 'true'
                  }
                }
              }
            })
          } else if (this.AddId === 1) {
            this.$http.get('http://192.168.31.217:8080/inforSource/showAll/' + key + '')
            .then(function (response) {
              T.childThemeList = response.data.data.list
              for (var j = 0; j < T.MUldatas.length; j++) {
                for (var i = 0; i < T.childThemeList.length; i++) {
                  if (T.MUldatas[j].mtId == T.childThemeList[i].mtId) {
                    T.childThemeList[i].checked = 'true'
                  }
                }
              }
            })
          }
          event.target.className = "leftListS"          
        }
      },
    // 点击弹出框取消按钮关闭弹出框
    themeClose: function () {
      this.$emit('aaa', false) 
      if (this.AddId === 0) {
        this.themeData = []
        this.$emit('aaa', false)         
      } else if (this.AddId === 1) {
        this.MmessageData = []
        this.$emit('aaa', false)       
      }
    },
    // 点击弹出框确认按钮关闭弹出框
    themeConfirm: function () {
      if (this.AddId === 0) {
        this.themeDatas = this.themeDatass
        this.$emit('themeUldata', this.themeDatas)
        this.$emit('aaa', false)
        this.addThemeShow = false          
      } else {
        this.MmessageDatas = this.MmessageDatass
        this.$emit('themeUldata', this.MmessageDatas)
        this.$emit('aaa', false)
        this.addThemeShow = false         
      }
      // this.MmessageData = []
    },
    // 点击右侧list切换选中/不选中
    pushBtn: function () {
      if (this.themeUlShow) {
        this.themeUlShow = false
      } else {
        this.themeUlShow = true
      }
    },
    feedback: function () {
      if (this.AddId === 0) {
        this.$router.push(
          {path: '/feedbackZT', query: {name: "zt"}}
        )
      } else if (this.AddId === 1) {
        this.$router.push(          
          {path: '/feedbackZT', query: {name: "xxy"}}
        )
      }
    }
  }
}
</script>

<style>
  @import '../../../../static/components/theme.css'
</style>
